<script setup>
import RankingList from "@/views/FrontViews/StoreModule/Ranking/components/RankingList.vue";
import Recommend from "@/views/FrontViews/StoreModule/Ranking/components/Recommend.vue";
import {useRoute} from "vue-router";
import {ref, watch} from "vue";

const route = useRoute()
const title = ref()

watch(
    () => route.params.type,
    (newValue) => {
      title.value = newValue === 'rate' ? '评分排行榜' : '销量排行榜'
    },
    { immediate: true }
);
</script>

<template>
  <div class="container">
    <span class="title">{{ title }}</span>
  </div>
  <RankingList></RankingList>
  <Recommend></Recommend>
</template>

<style scoped>
.container {
  color: #fff;
  font-size: 48px;
  font-weight: bold;
  .title {
    margin-left: 140px;
    padding: 4px 6px;
  }
}
</style>
